<template>
  <div class="container-index">
    <ul class="left-list">
      <li :class="{actived: current == item.key}" @click="current=item.key" v-for="(item, index) in list">{{item.title}}</li>
    </ul>
    <component :is="current" class="right"></component>
  </div>
</template>

<script>
  // import AttrEditor from "./components/AttrEditor"
  import Order from "./Order.vue"
  import PresetAccount from "./PresetAccount.vue"
  import PayEnable from "./PayEnable.vue"
  import Popup from "./Popup.vue"
  import CouponPopup from "./CouponPopup.vue"
  import GroupPopup from "./GroupPopup.vue"
  // import Danmu from "./Danmu.vue"
  // import Box from "./Box.vue"
  import Register from "./Register.vue"
  import Signin from "./Signin.vue"
  import Share from "./Share.vue"
  import Taobao from "./Taobao.vue"
  import Carriage from "./Carriage.vue"
  import PayType from "./PayType.vue"
  import UserStatement from "./UserStatement.vue"
  import BuyStatement from "./BuyStatement.vue"
  import AppVersion from "./AppVersion.vue"
  import CustomService from "./CustomService.vue"
  import Postcard from "./Postcard.vue"
  import TencentLogistics from "./TencentLogistics.vue"
  import SubscribeTemplate from "./SubscribeTemplate.vue"
  import BoxDepot from "./BoxDepot.vue"
  // import loginPage from "./LoginPage.vue"
  // import ipList from "./IPList.vue"
  // import shareRule from "./ShareRule.vue"
  // import boxRule from "./BoxRule.vue"
  // import eggLotteryRule from "./EggLotteryRule.vue"
  // import vip from "./Vip.vue"
  // import userCenter from "./UserCenter.vue"

  export default {
    components: {
      Order,
      PresetAccount,
      Popup,
      // Danmu,
      // Box,
      Register,
      Signin,
      Share,
      Taobao,
      PayEnable,
      Carriage,
      PayType,
      UserStatement,
      BuyStatement,
      AppVersion,
      CustomService,
      Postcard,
      TencentLogistics,
      SubscribeTemplate,
      BoxDepot,
      CouponPopup,
      GroupPopup,
      // loginPage,
      // shareRule,
      // boxRule,
      // eggLotteryRule,
      // vip,
      // ipList,
      // userCenter
    },
    data() {
      return {
        current: 'Order',
        list: [
          {
            title: '订单设置',
            key: 'Order',
          },
          {
            title: '运费设置',
            key: 'Carriage',
          },
          {
            title: '支付开关',
            key: 'PayEnable',
          },
          {
            title: 'APP支付方式',
            key: 'PayType',
          },
          {
            title: '系统预留帐号',
            key: 'PresetAccount',
          },
          // {
          //   title: '盲盒设置',
          //   key: 'Box'
          // },
          {
            title: '注册与登陆',
            key: 'Register'
          },
          {
            title: '签到设置',
            key: 'Signin'
          },
          {
            title: '分享设置',
            key: 'Share'
          },
          {
            title: '用户盒柜',
            key: 'BoxDepot'
          },
          {
            title: '首页弹窗(图片)',
            key: 'Popup'
          },
          {
            title: '首页弹窗(优惠券)',
            key: 'CouponPopup'
          },
          {
            title: '首页弹窗(群)',
            key: 'GroupPopup'
          },
          {
            title: '用户使用协议',
            key: 'UserStatement'
          },
          {
            title: '购买协议',
            key: 'BuyStatement'
          },
          {
            title: 'App版本管理',
            key: 'AppVersion'
          },
          {
            title: '客服设置',
            key: 'CustomService'
          },
          {
            title: '明信片设置',
            key: 'Postcard'
          },
          {
            title: '腾讯物流设置',
            key: 'TencentLogistics'
          },
          {
            title: '订阅消息设置',
            key: 'SubscribeTemplate'
          },
          // {
          //   title: '弹幕设置',
          //   key: 'Danmu'
          // },
          // {
          //   title: '淘宝端设置',
          //   key: 'Taobao'
          // }
        ]
      }
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {},
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .container-index {
    display: flex;

    .left-list {
      border-right: 1px solid #e1e1e1;
      width: 140px;
      flex: 0 0 140px;
      margin-right: 10px;
      padding-left: 0px;
      margin-left: -12px;

      li {
        list-style: none;
        border-bottom: 1px solid #e1e1e1;
        padding: 10px 10px;
        text-align: center;
        cursor: pointer;
        font-weight: 500;


        &.actived,
        &:hover {
          background: #1890FF;
          color: white;
        }
      }
    }


    .right {
      flex-grow: 1;
    }
  }
</style>
